{% extends "layout.html" %} {% block head_css %}
    <link rel="stylesheet" href="{{ url_for('static', path='/dist/css/spinner.min.css') }}"/> {% endblock head_css %}
{% block content %}
    <div class="wrapper">
        <div class="page-wrapper">
            <div class="loading" style="display: none;"></div>
            <div class="container-xl">
                <!-- Page title -->
                <div class="page-header d-print-none">
                    <div class="row align-items-center">
                        <!-- Page title actions -->
                        <div class="col-auto ms-auto d-print-none">
                            <div class="row">
                                <div class="col-lg-4">
                                    <label class="form-label">Date from:</label>
                                    <input class="form-control" type="date" name="date" id="datefrom"
                                           value="{{ dates[0] }}"/>
                                </div>
                                <div class="col-lg-4">
                                    <label class="form-label">Date to:</label>
                                    <input class="form-control" type="date" name="date" id="dateto"
                                           value="{{ dates[-1] }}"/>
                                </div>
                                <div class="col-lg-4" style="align-self: flex-end;">
                                    <button type="button" class="btn btn-primary"
                                            id="changeDateButton">{{ _('Apply') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-body">
                <div class="container-xl">
                    <div class="row row-deck row-cards">
                        <div class="col-sm-6 col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="subheader">Proxies created</div>
                                    </div>
                                    <div class="h1 mb-3" id="proxies_created">{{ data.proxies_created | sum }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="subheader">Registered users</div>
                                        <div class="ms-auto lh-1"></div>
                                    </div>
                                    <div class="d-flex align-items-baseline">
                                        <div class="h1 mb-0 me-2"
                                             id="registered_users">{{ data.registered_users | sum }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="subheader">Servers added</div>
                                    </div>
                                    <div class="d-flex align-items-baseline">
                                        <div class="h1 mb-3 me-2"
                                             id="servers_added">{{ data.servers_added | sum }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="subheader">Orders created</div>
                                    </div>
                                    <div class="d-flex align-items-baseline">
                                        <div class="h1 mb-3 me-2"
                                             id="orders_created">{{ data.orders_created | sum }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="row row-cards">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex">
                                                <h3 class="card-title">Statistics</h3>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <canvas id="stat_chart" data-dates="{{ data.dates }}"
                                                            data-registered_users="{{ data.registered_users }}"
                                                            data-proxies_created="{{ data.proxies_created }}"
                                                            data-orders_created="{{ data.orders_created }}"
                                                            data-servers_added="{{ data.servers_added }}"
                                                            data-mobile_proxies_bought="{{ data.mobile_proxies_bought }}"
                                                            data-server_proxies_bought="{{ data.server_proxies_bought }}"
                                                            data-payments_payed="{{ data.payments_payed }}"
                                                            data-messages_sent="{{ data.messages_sent }}"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">{{ _('Stats by day') }}</h3>
                                    <div class="col-12 col-md-auto ms-auto d-print-none" style="width: auto;">
                                        <button onclick="tableToCSV()" id="export_button"
                                                class="btn btn-primary d-none d-sm-inline-block">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 class="icon icon-tabler icon-tabler-download" width="24" height="24"
                                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                                 stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
                                                <polyline points="7 11 12 16 17 11"></polyline>
                                                <line x1="12" y1="4" x2="12" y2="16"></line>
                                            </svg>
                                            {{ _('Export') }} </button>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="table_stats"
                                           class="table card-table table-vcenter text-nowrap datatable">
                                        <thead>
                                        <tr>
                                            <th class="w-1">Date</th>
                                            <th>Users registered</th>
                                            <th>Proxies uploaded</th>
                                            <th>Orders created</th>
                                            <th>Servers added</th>
                                            <th>Mobile proxies bought</th>
                                            <th>Server proxies bought</th>
                                            <th>Payments payed</th>
                                            <th>Messages sent</th>
                                        </tr>
                                        </thead>
                                        <tbody> {% for date, row in table_columns %}
                                            <tr>
                                                <td>{{ date }}</td> {% for column in row %}
                                                <td>{{ column }}</td> {% endfor %}
                                            </tr> {% endfor %}
                                        <tr>
                                            <td>Total</td> {% for column in data.rows_sums %}
                                            <td>{{ column }}</td> {% endfor %}
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> {% endblock content %} {% block script %}
    <script>
        function tableToCSV() {
            var csv_data = [];
            var rows = document.getElementsByTagName("tr");
            for (var i = 0; i < rows.length; i++) {
                var cols = rows[i].querySelectorAll("td,th");
                var csvrow = [];
                for (var j = 0; j < cols.length; j++) {
                    csvrow.push(cols[j].innerText);
                }
                csv_data.push(csvrow.join(","));
            }
            csv_data = csv_data.join("\n");
            console.log(csv_data);
            downloadCSVFile(csv_data);
        }

        function downloadCSVFile(csv_data) {
            CSVFile = new Blob([csv_data], {
                type: "text/csv",
            });
            var temp_link = document.createElement("a");
            temp_link.download = "table.csv";
            var url = window.URL.createObjectURL(CSVFile);
            temp_link.href = url;
            temp_link.style.display = "none";
            document.body.appendChild(temp_link);
            temp_link.click();
            document.body.removeChild(temp_link);
        }
    </script>
    <script src="{{ url_for('static', path='/dist/js/charts.js') }}"></script>
    <script src="{{ url_for('static', path='/dist/js/Chart.min.js') }}"></script> {% endblock script %}